import axios from "axios";
import { useEffect, useState } from "react";
import Filter from "@/components/elements/Filter";
import Footer from "@/components/layouts/Footer";
import Header from "@/components/layouts/Header";
import Layout from "@/components/layouts/Layout";
import Pagination from "@/components/elements/Pagination";
import ProductCard from "@/components/products/ProductCard";
import { getIdFromSlug, getNameFromSlug } from "@/core/utils/slug";
import FilterIcon from "@/icons/filter.svg";
import apiOdoo from "@/core/utils/apiOdoo";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";
import { Pagination as SwiperPagination } from "swiper";
import Image from "@/components/elements/Image";
import LineDivider from "@/components/elements/LineDivider";

export async function getServerSideProps(context) {
  const { 
    slug, 
    page = 1, 
    category = '',
    price_from = '',
    price_to = '',
    order_by = '',
  } = context.query;

  let urlParameter = [
    'q=*',
    `page=${page}`,
    `brand=${getNameFromSlug(slug)}`,
    `category=${category}`,
    `price_from=${price_from}`,
    `price_to=${price_to}`,
    `order_by=${order_by}`
  ].join('&');
  let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?${urlParameter}`);
  searchResults = searchResults.data;

  const manufacture = await apiOdoo('GET', `/api/v1/manufacture/${getIdFromSlug(slug)}`);
  
  return {
    props: { 
      searchResults, 
      page, 
      slug, 
      category, 
      price_from,
      price_to,
      order_by,
      manufacture
    }
  };
}

export default function BrandDetail({ 
  searchResults,
  page,
  slug,
  category, 
  price_from,
  price_to,
  order_by,
  manufacture
}) {
  const pageCount = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows);
  const productStart = searchResults.responseHeader.params.start;
  const productRows = searchResults.responseHeader.params.rows;
  const productFound = searchResults.response.numFound;

  const [activeFilter, setActiveFilter] = useState(false);
  const [filterCount, setFilterCount] = useState(0);

  const route = () => {
    let route = `/shop/brands/${slug}`;
    if (category) route += `&category=${category}`;
    if (price_from) route += `&price_from=${price_from}`;
    if (price_to) route += `&price_to=${price_to}`;
    if (order_by) route += `&order_by=${order_by}`;
    return route;
  }

  useEffect(() => {
    let calculateFilterCount = 0;
    if (category) calculateFilterCount++;
    if (price_from || price_to) calculateFilterCount++;
    if (order_by) calculateFilterCount++;
    setFilterCount(calculateFilterCount);
  }, [category, price_from, price_to, order_by]);

  return (
    <>
      <Header title={`Distributor ${getNameFromSlug(slug)} Indonesia Harga Official - Indoteknik`} />
      <Filter 
        defaultRoute={`/shop/brands/${slug}`}
        isActive={activeFilter}
        closeFilter={() => setActiveFilter(false)}
        defaultPriceFrom={price_from}
        defaultPriceTo={price_to}
        defaultBrand=''
        defaultCategory={category}
        defaultOrderBy={order_by}
        searchResults={searchResults}
        disableFilter={['brand']}
      />
      <Layout>
        <Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[SwiperPagination]}>
          {
            manufacture.banners?.map((banner, index) => (
              <SwiperSlide key={index}>
                <Image
                  src={banner} 
                  alt={`Banner ${manufacture.name}`} 
                  className="w-full h-auto border-b border-gray_r-6"
                />
              </SwiperSlide>
            ))
          }
        </Swiper>
        <div className="p-4 grid grid-cols-2">
          <div>
            <p className="text-caption-2 text-gray_r-11 mb-2">Produk dari brand:</p>
            { manufacture.logo ? (
              <div className="w-8/12">
                <Image src={manufacture?.logo} alt={manufacture.name} className="border border-gray_r-6 rounded p-3" />
              </div>
            ) : (
              <p className="badge-solid-red text-caption-1">{ manufacture.name }</p>
              ) }
          </div>
          <div className="text-right">
            <p className="text-caption-2 text-gray_r-11 mb-2">Jumlah Produk:</p>
            <p>{ searchResults.response.numFound }</p>
          </div>
        </div>

        <LineDivider />

        <div className="p-4">
          <h1 className="mb-2">Produk</h1>
          <div className="text-caption-1 mb-4">
            {productFound > 0 ? (
              <>
                Menampilkan&nbsp;
                {pageCount > 1 ? (
                  <>
                    {productStart + 1}-{
                      (productStart + productRows) > productFound ? productFound : productStart + productRows
                    }
                    &nbsp;dari&nbsp;
                  </>
                ) : ''}
                {searchResults.response.numFound}
                &nbsp;produk untuk brand <span className="font-semibold">{getNameFromSlug(slug)}</span>
              </>
            ) : 'Mungkin yang anda cari'}
          </div>
          <button className="btn-light py-2 flex items-center gap-x-2 mb-4" onClick={() => setActiveFilter(true)}>
            <FilterIcon className="w-4 h-4" /> <span>Filter {filterCount > 0 ? `(${filterCount})` : ''}</span>
          </button>
          <div className="grid grid-cols-2 gap-3">
            {searchResults.response.products.map((product) => (
              <ProductCard key={product.id} data={product} />
            ))}
          </div>
          
          <div className="mt-4">
            <Pagination pageCount={pageCount} currentPage={parseInt(page)} url={route()} />
          </div>
        </div>

        <Footer />
      </Layout>
    </>
  )
}